<template>
  <div>
    <v-toolbar dense elevation="2">
      <div>
        <v-btn icon @click="$router.go(-1)">
          <v-icon small>mdi-arrow-expand-left</v-icon>
        </v-btn>
      </div>
      <v-spacer/>
      <div>
        提交订单
      </div>
    </v-toolbar>
    <v-main>
      <v-card elevation="1" class="my-1">
        <v-list nav>
          <v-list-item link @click="sheet = !sheet">
            <v-list-item-title>{{addressText}}</v-list-item-title>
            <v-list-item-action>
              <v-icon>mdi-chevron-right</v-icon>
            </v-list-item-action>
          </v-list-item>
        </v-list>
      </v-card>
      <v-card class="my-1">
        <v-card-title>店铺名称</v-card-title>
        <v-card-text>
          <v-row v-for="goods in orderGoodsList" :key="goods.id">
            <v-col cols="3">
              <v-img :src="goods.image" width="50px"/>
            </v-col>
            <v-col cols="6">
              <div>{{goods.goodsName}}</div>
              <div class="caption">{{goods.goodsNum}}</div>
            </v-col>
            <v-col cols="3" style="color: crimson">
              ￥{{goods.price*goods.goodsNum/100}}
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
      <v-bottom-sheet v-model="sheet">
        <v-card
            class="text-center"
            height="300px"
        >
          <v-card-title>
            选择收货地址
          </v-card-title>
          <v-card-text style="max-height: 200px;overflow: auto">
            <v-list two-line nav >
              <template v-for="address in addressList">
                <v-list-item :key="address.id" link @click="handleSelectAddress(address)">
                  <v-list-item-content>
                    <v-list-item-title>
                      {{address.address+address.addressDetails}}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{address.name}}&nbsp;{{address.phone}}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-divider/>
              </template>
            </v-list>
          </v-card-text>
          <v-card-actions>
            <v-btn block @click="$router.push('/my/address')">新增收货地址</v-btn>
          </v-card-actions>
        </v-card>
      </v-bottom-sheet>
    </v-main>
    <v-footer fixed>
      <v-row>
        <v-col cols="8" style="color: crimson">总金额:￥{{totalPrice/100}}</v-col>
        <v-col cols="4">
          <v-btn block color="success" @click="toPay">去支付</v-btn>
        </v-col>
      </v-row>
    </v-footer>

    <v-dialog
        v-model="loadDialog"
        persistent
        width="80%"
        max-width="300"
    >
      <v-card
          color="success"
          dark
      >
        <v-card-text>
          模拟支付中...‍🛴
          <v-progress-linear
              indeterminate
              color="white"
              class="mb-0"
          ></v-progress-linear>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import {selectAddressByCustomerId} from "@/http/api/address";
import {insertOrder, updateOrderToPay} from "@/http/api/order";

export default {
  name: "PayPage",
  data:()=>({
    orderGoodsList:[],
    sheet:false,
    addressList:[],
    orderPay:{
      addressId:null
    },
    selectedAddress:null,
    loadDialog:false
  }),
  computed:{
    loginCustomer(){
      return this.$store.state.customer
    },
    addressText(){
      let text = "选择收货地址";
      if (this.orderPay.addressId){
        text = this.selectedAddress.address+this.selectedAddress.addressDetails;
      }
      return text;
    },
    totalPrice(){
      let total = 0;
      for (const goods of this.orderGoodsList) {
        total += goods.price * goods.goodsNum
      }
      return total
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      this.orderGoodsList = JSON.parse(this.$route.query.jsonStr)
      this.getAddress()
    },
    getAddress(){
      selectAddressByCustomerId(this.loginCustomer.id).then(res=>{
        this.addressList = res.data
      })
    },
    handleSelectAddress(address){
      this.sheet = false
      this.orderPay.addressId = address.id
      this.selectedAddress = address
    },
    toPay(){
      if (!this.selectedAddress){
        this.$breadstick.notify("请选择收货地址!!")
        return;
      }
      this.orderPay.orderGoodsList = this.orderGoodsList;
      this.orderPay.customerId = this.loginCustomer.id;
      insertOrder(this.orderPay).then(res=>{
        let data = res.data;
        if (data.errorCode==0){
          this.$breadstick.notify("订单创建成功!!")
          this.loadDialog = true;
          let orderId = data.message;
          updateOrderToPay(orderId).then(res=>{
            this.sheet = false;
            this.$breadstick.notify("✔支付成功!!");
            this.$router.push("/order")
          })
        }else {
          this.$breadstick.notify("❌"+data.message);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>